<template>
<div class="visual-mod" 
    :class='{
        "visual-mod-prev": prevTempFlag,
        "visual-mod-edit": editTempFlag || editContFlag,
        "visual-mod-edit-temp": editTempFlag,
        "visual-mod-edit-cont": editContFlag,
    }'>

    <!-- 操作工具栏-左 -->
    <div class="temp-opera-l-mod" :class='{"shrink-hide": shrinkHideLflag}'>
        <div class="tool-l-head">元件</div>
        <span class="temp-shrink-icon" @click='toggleShrinkOpenL'>
            <span class="temp-shrink-l">
                <Icon custom='g-icon LeftOutlined' size="14"></Icon>
            </span>
            <span class="temp-shrink-r">
                <Icon custom='g-icon RightOutlined' size="14"></Icon>
            </span>
        </span>
        <div class="tool-l-content">

            <div class="tool-l-head-line">通用</div>
            <ul class="wait-add-list-mod">
                <li class="wait-add-item" v-for='waitItem in tempElemsCommon' :class='waitItem.classname' @dblclick='addElemToBox(waitItem)'>
                    <div class="wait-add-img-box"></div>
                    <div class="wait-add-ms">{{waitItem.text}}</div>
                </li>
            </ul>

            <div class="tool-l-head-line">输入框</div>
            <ul class="wait-add-list-mod">
                <li class="wait-add-item" v-for='waitItem in tempElemsInputList' :class='waitItem.classname' @dblclick='addElemToBox(waitItem)'>
                    <div class="wait-add-img-box"></div>
                    <div class="wait-add-ms">{{waitItem.text}}</div>
                </li>
            </ul>


            <div class="tool-l-head-line">图表</div>
            <ul class="wait-add-list-mod">
                <li class="wait-add-item" v-for='waitItem in tempElemsEchartList' :class='waitItem.classname' @dblclick='addElemToBox(waitItem)'>
                    <div class="wait-add-img-box"></div>
                    <div class="wait-add-ms">{{waitItem.text}}</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 操作工具栏-右 -->
    <div class="temp-opera-r-mod tool-head-tab" :class='{"shrink-hide": shrinkHideRflag}'>
        <span class="temp-shrink-icon" @click='toggleShrinkOpenR'>
            <span class="temp-shrink-l"><Icon custom='g-icon RightOutlined' size="14"></Icon></span>
            <span class="temp-shrink-r"><Icon custom='g-icon LeftOutlined' size="14"></Icon></span>
        </span>
        <div class="tool-head-tab-box">
            <span class="t-head-tab-item" @click='skipToolPanel(1)' :class='{"selected": panelSelectRId == 1}'>设置容器</span>
            <span class="t-head-tab-item" @click='skipToolPanel(3)' :class='{"selected": panelSelectRId == 3}'>设置容器内部</span>
            <span class="t-head-tab-item" @click='skipToolPanel(2)' :class='{"selected": panelSelectRId == 2}'>设置总面板</span>
            <span class="t-head-tab-item" @click='skipToolPanel(4)' :class='{"selected": panelSelectRId == 4}'>辅助</span>
        </div>
        <div class="t-con-tab-item" :class='{"selected": panelSelectRId == 1}'>
            <div class="temp-opera-box-line">
                <Button class="temp-opera-box-item" @click='resetSelectBox'>重置容器</Button>
                <Button class="temp-opera-box-item" @click='canceSelectBox'>取消选择</Button>
                <Button class="temp-opera-box-item" @click='delSelectBox'>删除容器</Button>
            </div>
            
            <ul class="edit-temp-pendant-mod" v-show='selectItemData.dataKey'>
                <li class="tool-l-head-line">尺寸</li>
                <li class="padant-item">
                    <span class="padant-l">宽度</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.widthNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.widthUnit" class='padant-r' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in unitList2" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">高度</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.heightNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.heightUnit" class='padant-r' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in unitList4" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="tool-l-head-line">位置</li>
                <li class="padant-item">
                    <span class="padant-l">相对位置</span>
                    <Select v-model="selectedStylesData.position" class='padant-c' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in positionList" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">堆叠顺序</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.zIndex' @on-change='setSelectedStylesForBox'></Input>
                </li>
                <li class="padant-item">
                    <span class="padant-l">横向-left</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.leftNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.leftUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">纵向-top</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.topNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.topUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                
                <li class="tool-l-head-line">字体</li>
                <li class="padant-item">
                    <span class="padant-l">字体颜色</span>
                    <input type="color" class="padant-c" v-model='selectedStylesData.color' @input='setSelectedStylesForBox' /> 
                </li>
                <li class="padant-item">
                    <span class="padant-l">字体大小</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.fontSizeNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.fontSizeUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">对齐方式</span>
                    <Select v-model="selectedStylesData.textAlign" class='padant-c' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in textAlignList" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">行高</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.lineHeightNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.lineHeightUnit" class='padant-c' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>

                <li class="tool-l-head-line">外边距</li>
                <li class="padant-item">
                    <span class="padant-l">外边距-上</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.marginTopNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.marginTopUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">外边距-左</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.marginLeftNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.marginLeftUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">外边距-下</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.marginBottomNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.marginBottomUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">外边距-右</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.marginRightNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.marginRightUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>

                <li class="tool-l-head-line">内边距</li>
                <li class="padant-item">
                    <span class="padant-l">内边距-上</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.paddingTopNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.paddingTopUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">内边距-左</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.paddingLeftNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.paddingLeftUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">内边距-下</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.paddingBottomNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.paddingBottomUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">内边距-右</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.paddingRightNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.paddingRightUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>

                <li class="tool-l-head-line">其它</li>
                <li class="padant-item">
                    <span class="padant-l">背景色</span>
                    <input type="color" class="padant-c" v-model='selectedStylesData.backgroundColor' @input='setSelectedStylesForBox' /> 
                    <Button @click='setSelectedStylesClearBg'>清除</Button>
                </li>
                <li class="padant-item">
                    <span class="padant-l">是否换行</span>
                    <Select v-model="selectedStylesData.clearUnit" class='padant-r' @on-change='setSelectedStylesForBox'>
                        <Option v-for="item in yesOrNoList" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">位移-横向</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.transformXNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.transformXUnit" class='padant-r'>
                        <Option v-for="item in unitList2" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">位移-纵向</span>
                    <Input type='number' class="padant-c" v-model='selectedStylesData.transformYNum' @on-change='setSelectedStylesForBox'></Input>
                    <Select v-model="selectedStylesData.transformYUnit" class='padant-r'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>

                <li class="tool-l-head-line">特殊</li>
                <li class="padant-item">
                    <span class="padant-l">边框</span>
                    <Input class="padant-c-r" v-model='selectedStylesData.border' @on-change='setSelectedStylesForBox'></Input>
                </li>
            </ul>


            
        </div>
        <div class="t-con-tab-item" :class='{"selected": panelSelectRId == 2}'>
            <ul class="edit-temp-pendant-mod">
                <!-- <li class="edit-box-text-num">{{selectItemData.dataKey && selectItemData.dataKey.slice(-2)}}/{{nowUseMaxIdNum}}</li> -->
                <li class="padant-item">
                    <span class="padant-l">宽度</span>
                    <Input type='number' class="padant-c" v-model='mainData.panelStyles.widthNum' @on-change='setSelectedStylesForPanel'></Input>
                    <Select v-model="mainData.panelStyles.widthUnit" class='padant-r' @on-change='setSelectedStylesForPanel'>
                        <Option v-for="item in unitList1" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">高度</span>
                    <Input type='number' class="padant-c" v-model='mainData.panelStyles.heightNum' @on-change='setSelectedStylesForPanel'></Input>
                    <Select v-model="mainData.panelStyles.heightUnit" class='padant-r' @on-change='setSelectedStylesForPanel'>
                        <Option v-for="item in unitList3" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">背景色</span>
                    <input type="color" class="padant-c" v-model='mainData.panelStyles.backgroundColor' @input='setSelectedStylesForPanel' /> 
                    <Button @click='clearAllPanelBgColor'>清除</Button>
                </li>
            </ul>
        </div>
        <div class="t-con-tab-item edit-temp-pendant-mod" :class='{"selected": panelSelectRId == 3}'>
            <div v-if='selectedBoxType == "SignInput" || selectedBoxType == "SignTextarea"'>
                <li class="padant-item">
                    <span class="padant-l">提示文字</span>
                    <Input class="padant-c-r" v-model='selectedBoxFixData.placeholder'></Input>
                </li>
                <li class="padant-item">
                    <span class="padant-l">最大可输入长度</span>
                    <Input class="padant-c-r" v-model='selectedBoxFixData.maxlength'></Input>
                </li>
            </div>
            <div v-if='selectedBoxType == "QueryTable"'>
                <li class="padant-item">
                    <span class="padant-l">查询链接</span>
                    <Select v-model="selectedBoxFixData.queryUrl" class='padant-r'>
                        <Option v-for="item in searchUrlListForTable" :value="item.dicKey" :key="item.dicKey">{{ item.dicVal }}</Option>
                    </Select>
                </li>
                <li class="padant-item">
                    <span class="padant-l">字段匹配</span>
                    <Input type='textarea' class="padant-c-r" v-model='selectedBoxFixData.fieldNames' placeholder='请按顺序输入字段并用逗号隔开,没有的话请不输并加上空格,如:name,,sex,date'></Input>
                </li>
            </div>
            <div v-if='selectedBoxType == "SignSquare" || selectedBoxType == "SignCircular" || selectedBoxType == "SignStraightLine" || selectedBoxType == "SignDottedLine"'>
                <li class="padant-item">
                    <span class="padant-l">边框宽度</span>
                    <Input class="padant-c-r" v-model='selectedBoxFixData.borderWidth'></Input>
                </li>
                <li class="padant-item">
                    <span class="padant-l">边框颜色</span>
                    <input type='color' class="padant-c-r" v-model='selectedBoxFixData.borderColor'></input>
                </li>
            </div>
            <div v-if='selectedBoxType == "EchartItem2"'>
                <li class="padant-item">
                    <span class="padant-l">图表颜色</span>
                    <input type='color' class="padant-c-r" v-model='selectedBoxFixData.colors'></input>
                </li>
            </div>
            <div style="margin-top: 10px; text-align: center;">
                <Button @click='clickEditBoxFixData'>发起修改</Button>
            </div>
        </div>
        <div class="t-con-tab-item" :class='{"selected": panelSelectRId == 4}'>
            <div class="wait-assist-item">
                <i-switch v-model="isShowPanelItemBoxBorderFlag"></i-switch>&nbsp;&nbsp;&nbsp;显示容器边框
            </div>
            <div class="wait-assist-item">
                <i-switch v-model="isShowPanelBgBorderFlag"></i-switch>&nbsp;&nbsp;&nbsp;显示面板底部边框
            </div>
            
        </div>
    </div>

    <!-- 核心内容区 -->
    <div class="visual-content-mod" id='visual-content-mod' :style="mainData.panelStyles" :class='{"isShowPanelItemBoxBorderFlag":isShowPanelItemBoxBorderFlag,"isShowPanelBgBorderFlag":isShowPanelBgBorderFlag}'>
        <!-- 公有容器-01 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox101'
            :class='{selected: selectItemData.dataKey == "tempCommonBox101"}' 
            @click='selectTempBoxItem(mainData.tempCommonBox101)'
            ref='"editTemp" + mainData.tempCommonBox101.dataKey'
            :style="mainData.tempCommonBox101.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox101.tempData'
                ref='tempCommonBox101' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox101)'>01拖动</span>
        </div>
        <!-- 公有容器-02 -->
        <div 
            class="visual-sign-box" 
            v-if='mainData.tempCommonBox102'
            :class='{selected: selectItemData.dataKey == "tempCommonBox102"}' 
            @click='selectTempBoxItem(mainData.tempCommonBox102)'
            ref='"editTemp" + mainData.tempCommonBox102.dataKey'
            :style="mainData.tempCommonBox102.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox102.tempData'
                ref='tempCommonBox102' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox102)'>02拖动</span>
        </div>
        <!-- 公有容器-03 -->
        <div 
            class="visual-sign-box" 
            v-if='mainData.tempCommonBox103'
            :class='{selected: selectItemData.dataKey == "tempCommonBox103"}' 
            @click='selectTempBoxItem(mainData.tempCommonBox103)'
            ref='"editTemp" + mainData.tempCommonBox103.dataKey'
            :style="mainData.tempCommonBox103.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox103.tempData'
                ref='tempCommonBox103' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox103)'>拖动</span>
        </div>
        <!-- 公有容器-04 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox104'
            :class='{selected: selectItemData.dataKey == "tempCommonBox104"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox104)'
            ref='"editTemp" + mainData.tempCommonBox104.dataKey'
            :style="mainData.tempCommonBox104.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox104.tempData'
                ref='tempCommonBox104' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox104)'>拖动</span>
        </div>
        <!-- 公有容器-05 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox105'
            :class='{selected: selectItemData.dataKey == "tempCommonBox105"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox105)'
            ref='"editTemp" + mainData.tempCommonBox105.dataKey'
            :style="mainData.tempCommonBox105.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox105.tempData'
                ref='tempCommonBox105' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox105)'>拖动</span>
        </div>
        <!-- 公有容器-06 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox106'
            :class='{selected: selectItemData.dataKey == "tempCommonBox106"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox106)'
            ref='"editTemp" + mainData.tempCommonBox106.dataKey'
            :style="mainData.tempCommonBox106.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox106.tempData'
                ref='tempCommonBox106' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox106)'>拖动</span>
        </div>
        <!-- 公有容器-07 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox107'
            :class='{selected: selectItemData.dataKey == "tempCommonBox107"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox107)'
            ref='"editTemp" + mainData.tempCommonBox107.dataKey'
            :style="mainData.tempCommonBox107.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox107.tempData'
                ref='tempCommonBox107' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox107)'>拖动</span>
        </div>
        <!-- 公有容器-08 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox108'
            :class='{selected: selectItemData.dataKey == "tempCommonBox108"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox108)'
            ref='"editTemp" + mainData.tempCommonBox108.dataKey'
            :style="mainData.tempCommonBox108.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox108.tempData'
                ref='tempCommonBox108' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox108)'>拖动</span>
        </div>
        <!-- 公有容器-09 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox109'
            :class='{selected: selectItemData.dataKey == "tempCommonBox109"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox109)'
            ref='"editTemp" + mainData.tempCommonBox109.dataKey'
            :style="mainData.tempCommonBox109.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox109.tempData'
                ref='tempCommonBox109' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox109)'>拖动</span>
        </div>
        <!-- 公有容器-10 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox110'
            :class='{selected: selectItemData.dataKey == "tempCommonBox110"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox110)'
            ref='"editTemp" + mainData.tempCommonBox110.dataKey'
            :style="mainData.tempCommonBox110.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox110.tempData'
                ref='tempCommonBox110' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox110)'>拖动</span>
        </div> 


        <!-- 公有容器-11 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox111'
            :class='{selected: selectItemData.dataKey == "tempCommonBox111"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox111)'
            ref='"editTemp" + mainData.tempCommonBox111.dataKey'
            :style="mainData.tempCommonBox111.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox111.tempData'
                ref='tempCommonBox111' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox111)'>拖动</span>
        </div> 
        <!-- 公有容器-12 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox112'
            :class='{selected: selectItemData.dataKey == "tempCommonBox112"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox112)'
            ref='"editTemp" + mainData.tempCommonBox112.dataKey'
            :style="mainData.tempCommonBox112.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox112.tempData'
                ref='tempCommonBox112' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox112)'>拖动</span>
        </div> 
        <!-- 公有容器-13 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox113'
            :class='{selected: selectItemData.dataKey == "tempCommonBox113"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox113)'
            ref='"editTemp" + mainData.tempCommonBox113.dataKey'
            :style="mainData.tempCommonBox113.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox113.tempData'
                ref='tempCommonBox113' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox113)'>拖动</span>
        </div> 
        <!-- 公有容器-14 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox114'
            :class='{selected: selectItemData.dataKey == "tempCommonBox114"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox114)'
            ref='"editTemp" + mainData.tempCommonBox114.dataKey'
            :style="mainData.tempCommonBox114.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox114.tempData'
                ref='tempCommonBox114' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox114)'>拖动</span>
        </div> 
        <!-- 公有容器-15 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox115'
            :class='{selected: selectItemData.dataKey == "tempCommonBox115"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox115)'
            ref='"editTemp" + mainData.tempCommonBox115.dataKey'
            :style="mainData.tempCommonBox115.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox115.tempData'
                ref='tempCommonBox115' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox115)'>拖动</span>
        </div> 
        <!-- 公有容器-16 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox116'
            :class='{selected: selectItemData.dataKey == "tempCommonBox116"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox116)'
            ref='"editTemp" + mainData.tempCommonBox116.dataKey'
            :style="mainData.tempCommonBox116.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox116.tempData'
                ref='tempCommonBox116' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox116)'>拖动</span>
        </div> 
        <!-- 公有容器-17 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox117'
            :class='{selected: selectItemData.dataKey == "tempCommonBox117"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox117)'
            ref='"editTemp" + mainData.tempCommonBox117.dataKey'
            :style="mainData.tempCommonBox117.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox117.tempData'
                ref='tempCommonBox117' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox117)'>拖动</span>
        </div> 
        <!-- 公有容器-18 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox118'
            :class='{selected: selectItemData.dataKey == "tempCommonBox118"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox118)'
            ref='"editTemp" + mainData.tempCommonBox118.dataKey'
            :style="mainData.tempCommonBox118.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox118.tempData'
                ref='tempCommonBox118' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox118)'>拖动</span>
        </div> 
        <!-- 公有容器-19 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox119'
            :class='{selected: selectItemData.dataKey == "tempCommonBox119"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox119)'
            ref='"editTemp" + mainData.tempCommonBox119.dataKey'
            :style="mainData.tempCommonBox119.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox119.tempData'
                ref='tempCommonBox119' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox119)'>拖动</span>
        </div> 
        <!-- 公有容器-20 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox120'
            :class='{selected: selectItemData.dataKey == "tempCommonBox120"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox120)'
            ref='"editTemp" + mainData.tempCommonBox120.dataKey'
            :style="mainData.tempCommonBox120.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox120.tempData'
                ref='tempCommonBox120' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox120)'>拖动</span>
        </div> 


        <!-- 公有容器-21 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox121'
            :class='{selected: selectItemData.dataKey == "tempCommonBox121"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox121)'
            ref='"editTemp" + mainData.tempCommonBox121.dataKey'
            :style="mainData.tempCommonBox121.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox121.tempData'
                ref='tempCommonBox121' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox121)'>拖动</span>
        </div> 
        <!-- 公有容器-22 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox122'
            :class='{selected: selectItemData.dataKey == "tempCommonBox122"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox122)'
            ref='"editTemp" + mainData.tempCommonBox122.dataKey'
            :style="mainData.tempCommonBox122.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox122.tempData'
                ref='tempCommonBox122' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox122)'>拖动</span>
        </div> 
        <!-- 公有容器-23 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox123'
            :class='{selected: selectItemData.dataKey == "tempCommonBox123"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox123)'
            ref='"editTemp" + mainData.tempCommonBox123.dataKey'
            :style="mainData.tempCommonBox123.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox123.tempData'
                ref='tempCommonBox123' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox123)'>拖动</span>
        </div> 
        <!-- 公有容器-24 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox124'
            :class='{selected: selectItemData.dataKey == "tempCommonBox124"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox124)'
            ref='"editTemp" + mainData.tempCommonBox124.dataKey'
            :style="mainData.tempCommonBox124.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox124.tempData'
                ref='tempCommonBox124' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox124)'>拖动</span>
        </div> 
        <!-- 公有容器-25 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox125'
            :class='{selected: selectItemData.dataKey == "tempCommonBox125"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox125)'
            ref='"editTemp" + mainData.tempCommonBox125.dataKey'
            :style="mainData.tempCommonBox125.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox125.tempData'
                ref='tempCommonBox125' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox125)'>拖动</span>
        </div> 
        <!-- 公有容器-26 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox126'
            :class='{selected: selectItemData.dataKey == "tempCommonBox126"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox126)'
            ref='"editTemp" + mainData.tempCommonBox126.dataKey'
            :style="mainData.tempCommonBox126.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox126.tempData'
                ref='tempCommonBox126' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox126)'>拖动</span>
        </div> 
        <!-- 公有容器-27 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox127'
            :class='{selected: selectItemData.dataKey == "tempCommonBox127"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox127)'
            ref='"editTemp" + mainData.tempCommonBox127.dataKey'
            :style="mainData.tempCommonBox127.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox127.tempData'
                ref='tempCommonBox127' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox127)'>拖动</span>
        </div> 
        <!-- 公有容器-28 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox128'
            :class='{selected: selectItemData.dataKey == "tempCommonBox128"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox128)'
            ref='"editTemp" + mainData.tempCommonBox128.dataKey'
            :style="mainData.tempCommonBox128.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox128.tempData'
                ref='tempCommonBox128' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox128)'>拖动</span>
        </div> 
        <!-- 公有容器-29 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox129'
            :class='{selected: selectItemData.dataKey == "tempCommonBox129"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox129)'
            ref='"editTemp" + mainData.tempCommonBox129.dataKey'
            :style="mainData.tempCommonBox129.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox129.tempData'
                ref='tempCommonBox129' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox129)'>拖动</span>
        </div> 
        <!-- 公有容器-30 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox130'
            :class='{selected: selectItemData.dataKey == "tempCommonBox130"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox130)'
            ref='"editTemp" + mainData.tempCommonBox130.dataKey'
            :style="mainData.tempCommonBox130.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox130.tempData'
                ref='tempCommonBox130' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox130)'>拖动</span>
        </div> 


        <!-- 公有容器-31 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox131'
            :class='{selected: selectItemData.dataKey == "tempCommonBox131"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox131)'
            ref='"editTemp" + mainData.tempCommonBox131.dataKey'
            :style="mainData.tempCommonBox131.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox131.tempData'
                ref='tempCommonBox131' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox131)'>拖动</span>
        </div> 
        <!-- 公有容器-32 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox132'
            :class='{selected: selectItemData.dataKey == "tempCommonBox132"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox132)'
            ref='"editTemp" + mainData.tempCommonBox132.dataKey'
            :style="mainData.tempCommonBox132.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox132.tempData'
                ref='tempCommonBox132' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox132)'>拖动</span>
        </div> 
        <!-- 公有容器-33 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox133'
            :class='{selected: selectItemData.dataKey == "tempCommonBox133"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox133)'
            ref='"editTemp" + mainData.tempCommonBox133.dataKey'
            :style="mainData.tempCommonBox133.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox133.tempData'
                ref='tempCommonBox133' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox133)'>拖动</span>
        </div> 
        <!-- 公有容器-34 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox134'
            :class='{selected: selectItemData.dataKey == "tempCommonBox134"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox134)'
            ref='"editTemp" + mainData.tempCommonBox134.dataKey'
            :style="mainData.tempCommonBox134.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox134.tempData'
                ref='tempCommonBox134' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox134)'>拖动</span>
        </div> 
        <!-- 公有容器-35 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox135'
            :class='{selected: selectItemData.dataKey == "tempCommonBox135"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox135)'
            ref='"editTemp" + mainData.tempCommonBox135.dataKey'
            :style="mainData.tempCommonBox135.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox135.tempData'
                ref='tempCommonBox135' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox135)'>拖动</span>
        </div> 
        <!-- 公有容器-36 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox136'
            :class='{selected: selectItemData.dataKey == "tempCommonBox136"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox136)'
            ref='"editTemp" + mainData.tempCommonBox136.dataKey'
            :style="mainData.tempCommonBox136.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox136.tempData'
                ref='tempCommonBox136' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox136)'>拖动</span>
        </div> 
        <!-- 公有容器-37 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox137'
            :class='{selected: selectItemData.dataKey == "tempCommonBox137"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox137)'
            ref='"editTemp" + mainData.tempCommonBox137.dataKey'
            :style="mainData.tempCommonBox137.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox137.tempData'
                ref='tempCommonBox137' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox137)'>拖动</span>
        </div> 
        <!-- 公有容器-38 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox138'
            :class='{selected: selectItemData.dataKey == "tempCommonBox138"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox138)'
            ref='"editTemp" + mainData.tempCommonBox138.dataKey'
            :style="mainData.tempCommonBox138.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox138.tempData'
                ref='tempCommonBox138' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox138)'>拖动</span>
        </div> 
        <!-- 公有容器-39 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox139'
            :class='{selected: selectItemData.dataKey == "tempCommonBox139"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox139)'
            ref='"editTemp" + mainData.tempCommonBox139.dataKey'
            :style="mainData.tempCommonBox139.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox139.tempData'
                ref='tempCommonBox139' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox139)'>拖动</span>
        </div> 
        <!-- 公有容器-40 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox140'
            :class='{selected: selectItemData.dataKey == "tempCommonBox140"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox140)'
            ref='"editTemp" + mainData.tempCommonBox140.dataKey'
            :style="mainData.tempCommonBox140.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox140.tempData'
                ref='tempCommonBox140' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox140)'>拖动</span>
        </div> 



        <!-- 公有容器-41 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox141'
            :class='{selected: selectItemData.dataKey == "tempCommonBox141"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox141)'
            ref='"editTemp" + mainData.tempCommonBox141.dataKey'
            :style="mainData.tempCommonBox141.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox141.tempData'
                ref='tempCommonBox141' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox141)'>拖动</span>
        </div> 
        <!-- 公有容器-42 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox142'
            :class='{selected: selectItemData.dataKey == "tempCommonBox142"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox142)'
            ref='"editTemp" + mainData.tempCommonBox142.dataKey'
            :style="mainData.tempCommonBox142.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox142.tempData'
                ref='tempCommonBox142' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox142)'>拖动</span>
        </div> 
        <!-- 公有容器-43 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox143'
            :class='{selected: selectItemData.dataKey == "tempCommonBox143"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox143)'
            ref='"editTemp" + mainData.tempCommonBox143.dataKey'
            :style="mainData.tempCommonBox143.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox143.tempData'
                ref='tempCommonBox143' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox143)'>拖动</span>
        </div> 
        <!-- 公有容器-44 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox144'
            :class='{selected: selectItemData.dataKey == "tempCommonBox144"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox144)'
            ref='"editTemp" + mainData.tempCommonBox144.dataKey'
            :style="mainData.tempCommonBox144.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox144.tempData'
                ref='tempCommonBox144' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox144)'>拖动</span>
        </div> 
        <!-- 公有容器-45 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox145'
            :class='{selected: selectItemData.dataKey == "tempCommonBox145"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox145)'
            ref='"editTemp" + mainData.tempCommonBox145.dataKey'
            :style="mainData.tempCommonBox145.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox145.tempData'
                ref='tempCommonBox145' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox145)'>拖动</span>
        </div> 
        <!-- 公有容器-46 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox146'
            :class='{selected: selectItemData.dataKey == "tempCommonBox146"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox146)'
            ref='"editTemp" + mainData.tempCommonBox146.dataKey'
            :style="mainData.tempCommonBox146.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox146.tempData'
                ref='tempCommonBox146' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox146)'>拖动</span>
        </div> 
        <!-- 公有容器-47 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox147'
            :class='{selected: selectItemData.dataKey == "tempCommonBox147"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox147)'
            ref='"editTemp" + mainData.tempCommonBox147.dataKey'
            :style="mainData.tempCommonBox147.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox147.tempData'
                ref='tempCommonBox147' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox147)'>拖动</span>
        </div> 
        <!-- 公有容器-48 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox148'
            :class='{selected: selectItemData.dataKey == "tempCommonBox148"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox148)'
            ref='"editTemp" + mainData.tempCommonBox148.dataKey'
            :style="mainData.tempCommonBox148.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox148.tempData'
                ref='tempCommonBox148' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox148)'>拖动</span>
        </div> 
        <!-- 公有容器-49 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox149'
            :class='{selected: selectItemData.dataKey == "tempCommonBox149"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox149)'
            ref='"editTemp" + mainData.tempCommonBox149.dataKey'
            :style="mainData.tempCommonBox149.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox149.tempData'
                ref='tempCommonBox149' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox149)'>拖动</span>
        </div> 
        <!-- 公有容器-50 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox150'
            :class='{selected: selectItemData.dataKey == "tempCommonBox150"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox150)'
            ref='"editTemp" + mainData.tempCommonBox150.dataKey'
            :style="mainData.tempCommonBox150.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox150.tempData'
                ref='tempCommonBox150' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox150)'>拖动</span>
        </div> 


        <!-- 公有容器-51 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox151'
            :class='{selected: selectItemData.dataKey == "tempCommonBox151"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox151)'
            ref='"editTemp" + mainData.tempCommonBox151.dataKey'
            :style="mainData.tempCommonBox151.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox151.tempData'
                ref='tempCommonBox151' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox151)'>拖动</span>
        </div> 
        <!-- 公有容器-52 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox152'
            :class='{selected: selectItemData.dataKey == "tempCommonBox152"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox152)'
            ref='"editTemp" + mainData.tempCommonBox152.dataKey'
            :style="mainData.tempCommonBox152.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox152.tempData'
                ref='tempCommonBox152' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox152)'>拖动</span>
        </div> 
        <!-- 公有容器-53 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox153'
            :class='{selected: selectItemData.dataKey == "tempCommonBox153"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox153)'
            ref='"editTemp" + mainData.tempCommonBox153.dataKey'
            :style="mainData.tempCommonBox153.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox153.tempData'
                ref='tempCommonBox153' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox153)'>拖动</span>
        </div> 
        <!-- 公有容器-54 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox154'
            :class='{selected: selectItemData.dataKey == "tempCommonBox154"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox154)'
            ref='"editTemp" + mainData.tempCommonBox154.dataKey'
            :style="mainData.tempCommonBox154.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox154.tempData'
                ref='tempCommonBox154' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox154)'>拖动</span>
        </div> 
        <!-- 公有容器-55 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox155'
            :class='{selected: selectItemData.dataKey == "tempCommonBox155"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox155)'
            ref='"editTemp" + mainData.tempCommonBox155.dataKey'
            :style="mainData.tempCommonBox155.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox155.tempData'
                ref='tempCommonBox155' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox155)'>拖动</span>
        </div> 
        <!-- 公有容器-56 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox156'
            :class='{selected: selectItemData.dataKey == "tempCommonBox156"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox156)'
            ref='"editTemp" + mainData.tempCommonBox156.dataKey'
            :style="mainData.tempCommonBox156.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox156.tempData'
                ref='tempCommonBox156' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox156)'>拖动</span>
        </div> 
        <!-- 公有容器-57 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox157'
            :class='{selected: selectItemData.dataKey == "tempCommonBox157"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox157)'
            ref='"editTemp" + mainData.tempCommonBox157.dataKey'
            :style="mainData.tempCommonBox157.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox157.tempData'
                ref='tempCommonBox157' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox157)'>拖动</span>
        </div> 
        <!-- 公有容器-58 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox158'
            :class='{selected: selectItemData.dataKey == "tempCommonBox158"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox158)'
            ref='"editTemp" + mainData.tempCommonBox158.dataKey'
            :style="mainData.tempCommonBox158.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox158.tempData'
                ref='tempCommonBox158' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox158)'>拖动</span>
        </div> 
        <!-- 公有容器-59 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox159'
            :class='{selected: selectItemData.dataKey == "tempCommonBox159"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox159)'
            ref='"editTemp" + mainData.tempCommonBox159.dataKey'
            :style="mainData.tempCommonBox159.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox159.tempData'
                ref='tempCommonBox159' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox159)'>拖动</span>
        </div> 
        <!-- 公有容器-60 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox160'
            :class='{selected: selectItemData.dataKey == "tempCommonBox160"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox160)'
            ref='"editTemp" + mainData.tempCommonBox160.dataKey'
            :style="mainData.tempCommonBox160.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox160.tempData'
                ref='tempCommonBox160' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox160)'>拖动</span>
        </div> 


        <!-- 公有容器-61 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox161'
            :class='{selected: selectItemData.dataKey == "tempCommonBox161"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox161)'
            ref='"editTemp" + mainData.tempCommonBox161.dataKey'
            :style="mainData.tempCommonBox161.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox161.tempData'
                ref='tempCommonBox161' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox161)'>拖动</span>
        </div> 
        <!-- 公有容器-62 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox162'
            :class='{selected: selectItemData.dataKey == "tempCommonBox162"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox162)'
            ref='"editTemp" + mainData.tempCommonBox162.dataKey'
            :style="mainData.tempCommonBox162.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox162.tempData'
                ref='tempCommonBox162' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox162)'>拖动</span>
        </div> 
        <!-- 公有容器-63 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox163'
            :class='{selected: selectItemData.dataKey == "tempCommonBox163"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox163)'
            ref='"editTemp" + mainData.tempCommonBox163.dataKey'
            :style="mainData.tempCommonBox163.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox163.tempData'
                ref='tempCommonBox163' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox163)'>拖动</span>
        </div> 
        <!-- 公有容器-64 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox164'
            :class='{selected: selectItemData.dataKey == "tempCommonBox164"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox164)'
            ref='"editTemp" + mainData.tempCommonBox164.dataKey'
            :style="mainData.tempCommonBox164.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox164.tempData'
                ref='tempCommonBox164' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox164)'>拖动</span>
        </div> 
        <!-- 公有容器-65 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox165'
            :class='{selected: selectItemData.dataKey == "tempCommonBox165"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox165)'
            ref='"editTemp" + mainData.tempCommonBox165.dataKey'
            :style="mainData.tempCommonBox165.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox165.tempData'
                ref='tempCommonBox165' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox165)'>拖动</span>
        </div> 
        <!-- 公有容器-66 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox166'
            :class='{selected: selectItemData.dataKey == "tempCommonBox166"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox166)'
            ref='"editTemp" + mainData.tempCommonBox166.dataKey'
            :style="mainData.tempCommonBox166.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox166.tempData'
                ref='tempCommonBox166' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox166)'>拖动</span>
        </div> 
        <!-- 公有容器-67 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox167'
            :class='{selected: selectItemData.dataKey == "tempCommonBox167"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox167)'
            ref='"editTemp" + mainData.tempCommonBox167.dataKey'
            :style="mainData.tempCommonBox167.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox167.tempData'
                ref='tempCommonBox167' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox167)'>拖动</span>
        </div> 
        <!-- 公有容器-68 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox168'
            :class='{selected: selectItemData.dataKey == "tempCommonBox168"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox168)'
            ref='"editTemp" + mainData.tempCommonBox168.dataKey'
            :style="mainData.tempCommonBox168.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox168.tempData'
                ref='tempCommonBox168' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox168)'>拖动</span>
        </div> 
        <!-- 公有容器-69 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox169'
            :class='{selected: selectItemData.dataKey == "tempCommonBox169"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox169)'
            ref='"editTemp" + mainData.tempCommonBox169.dataKey'
            :style="mainData.tempCommonBox169.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox169.tempData'
                ref='tempCommonBox169' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox169)'>拖动</span>
        </div> 
        <!-- 公有容器-70 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox170'
            :class='{selected: selectItemData.dataKey == "tempCommonBox170"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox170)'
            ref='"editTemp" + mainData.tempCommonBox170.dataKey'
            :style="mainData.tempCommonBox170.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox170.tempData'
                ref='tempCommonBox170' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox170)'>拖动</span>
        </div> 

        <!-- 公有容器-71 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox171'
            :class='{selected: selectItemData.dataKey == "tempCommonBox171"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox171)'
            ref='"editTemp" + mainData.tempCommonBox171.dataKey'
            :style="mainData.tempCommonBox171.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox171.tempData'
                ref='tempCommonBox171' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox171)'>拖动</span>
        </div> 
        <!-- 公有容器-72 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox172'
            :class='{selected: selectItemData.dataKey == "tempCommonBox172"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox172)'
            ref='"editTemp" + mainData.tempCommonBox172.dataKey'
            :style="mainData.tempCommonBox172.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox172.tempData'
                ref='tempCommonBox172' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox172)'>拖动</span>
        </div> 
        <!-- 公有容器-73 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox173'
            :class='{selected: selectItemData.dataKey == "tempCommonBox173"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox173)'
            ref='"editTemp" + mainData.tempCommonBox173.dataKey'
            :style="mainData.tempCommonBox173.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox173.tempData'
                ref='tempCommonBox173' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox173)'>拖动</span>
        </div> 
        <!-- 公有容器-74 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox174'
            :class='{selected: selectItemData.dataKey == "tempCommonBox174"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox174)'
            ref='"editTemp" + mainData.tempCommonBox174.dataKey'
            :style="mainData.tempCommonBox174.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox174.tempData'
                ref='tempCommonBox174' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox174)'>拖动</span>
        </div> 
        <!-- 公有容器-75 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox175'
            :class='{selected: selectItemData.dataKey == "tempCommonBox175"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox175)'
            ref='"editTemp" + mainData.tempCommonBox175.dataKey'
            :style="mainData.tempCommonBox175.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox175.tempData'
                ref='tempCommonBox175' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox175)'>拖动</span>
        </div> 
        <!-- 公有容器-76 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox176'
            :class='{selected: selectItemData.dataKey == "tempCommonBox176"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox176)'
            ref='"editTemp" + mainData.tempCommonBox176.dataKey'
            :style="mainData.tempCommonBox176.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox176.tempData'
                ref='tempCommonBox176' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox176)'>拖动</span>
        </div> 
        <!-- 公有容器-77 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox177'
            :class='{selected: selectItemData.dataKey == "tempCommonBox177"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox177)'
            ref='"editTemp" + mainData.tempCommonBox177.dataKey'
            :style="mainData.tempCommonBox177.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox177.tempData'
                ref='tempCommonBox177' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox177)'>拖动</span>
        </div> 
        <!-- 公有容器-78 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox178'
            :class='{selected: selectItemData.dataKey == "tempCommonBox178"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox178)'
            ref='"editTemp" + mainData.tempCommonBox178.dataKey'
            :style="mainData.tempCommonBox178.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox178.tempData'
                ref='tempCommonBox178' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox178)'>拖动</span>
        </div> 
        <!-- 公有容器-79 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox179'
            :class='{selected: selectItemData.dataKey == "tempCommonBox179"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox179)'
            ref='"editTemp" + mainData.tempCommonBox179.dataKey'
            :style="mainData.tempCommonBox179.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox179.tempData'
                ref='tempCommonBox179' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox179)'>拖动</span>
        </div> 
        <!-- 公有容器-80 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox180'
            :class='{selected: selectItemData.dataKey == "tempCommonBox180"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox180)'
            ref='"editTemp" + mainData.tempCommonBox180.dataKey'
            :style="mainData.tempCommonBox180.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox180.tempData'
                ref='tempCommonBox180' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox180)'>拖动</span>
        </div> 

        <!-- 公有容器-81 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox181'
            :class='{selected: selectItemData.dataKey == "tempCommonBox181"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox181)'
            ref='"editTemp" + mainData.tempCommonBox181.dataKey'
            :style="mainData.tempCommonBox181.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox181.tempData'
                ref='tempCommonBox181' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox181)'>拖动</span>
        </div> 
        <!-- 公有容器-82 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox182'
            :class='{selected: selectItemData.dataKey == "tempCommonBox182"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox182)'
            ref='"editTemp" + mainData.tempCommonBox182.dataKey'
            :style="mainData.tempCommonBox182.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox182.tempData'
                ref='tempCommonBox182' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox182)'>拖动</span>
        </div> 
        <!-- 公有容器-83 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox183'
            :class='{selected: selectItemData.dataKey == "tempCommonBox183"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox183)'
            ref='"editTemp" + mainData.tempCommonBox183.dataKey'
            :style="mainData.tempCommonBox183.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox183.tempData'
                ref='tempCommonBox183' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox183)'>拖动</span>
        </div> 
        <!-- 公有容器-84 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox184'
            :class='{selected: selectItemData.dataKey == "tempCommonBox184"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox184)'
            ref='"editTemp" + mainData.tempCommonBox184.dataKey'
            :style="mainData.tempCommonBox184.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox184.tempData'
                ref='tempCommonBox184' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox184)'>拖动</span>
        </div> 
        <!-- 公有容器-85 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox185'
            :class='{selected: selectItemData.dataKey == "tempCommonBox185"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox185)'
            ref='"editTemp" + mainData.tempCommonBox185.dataKey'
            :style="mainData.tempCommonBox185.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox185.tempData'
                ref='tempCommonBox185' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox185)'>拖动</span>
        </div> 
        <!-- 公有容器-86 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox186'
            :class='{selected: selectItemData.dataKey == "tempCommonBox186"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox186)'
            ref='"editTemp" + mainData.tempCommonBox186.dataKey'
            :style="mainData.tempCommonBox186.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox186.tempData'
                ref='tempCommonBox186' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox186)'>拖动</span>
        </div> 
        <!-- 公有容器-87 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox187'
            :class='{selected: selectItemData.dataKey == "tempCommonBox187"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox187)'
            ref='"editTemp" + mainData.tempCommonBox187.dataKey'
            :style="mainData.tempCommonBox187.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox187.tempData'
                ref='tempCommonBox187' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox187)'>拖动</span>
        </div> 
        <!-- 公有容器-88 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox188'
            :class='{selected: selectItemData.dataKey == "tempCommonBox188"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox188)'
            ref='"editTemp" + mainData.tempCommonBox188.dataKey'
            :style="mainData.tempCommonBox188.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox188.tempData'
                ref='tempCommonBox188' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox188)'>拖动</span>
        </div> 
        <!-- 公有容器-89 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox189'
            :class='{selected: selectItemData.dataKey == "tempCommonBox189"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox189)'
            ref='"editTemp" + mainData.tempCommonBox189.dataKey'
            :style="mainData.tempCommonBox189.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox189.tempData'
                ref='tempCommonBox189' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox189)'>拖动</span>
        </div> 
        <!-- 公有容器-90 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox190'
            :class='{selected: selectItemData.dataKey == "tempCommonBox190"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox190)'
            ref='"editTemp" + mainData.tempCommonBox190.dataKey'
            :style="mainData.tempCommonBox190.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox190.tempData'
                ref='tempCommonBox190' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox190)'>拖动</span>
        </div>

        <!-- 公有容器-91 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox191'
            :class='{selected: selectItemData.dataKey == "tempCommonBox191"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox191)'
            ref='"editTemp" + mainData.tempCommonBox191.dataKey'
            :style="mainData.tempCommonBox191.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox191.tempData'
                ref='tempCommonBox191' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox191)'>拖动</span>
        </div>
        <!-- 公有容器-92 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox192'
            :class='{selected: selectItemData.dataKey == "tempCommonBox192"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox192)'
            ref='"editTemp" + mainData.tempCommonBox192.dataKey'
            :style="mainData.tempCommonBox192.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox192.tempData'
                ref='tempCommonBox192' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox192)'>拖动</span>
        </div>
        <!-- 公有容器-93 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox193'
            :class='{selected: selectItemData.dataKey == "tempCommonBox193"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox193)'
            ref='"editTemp" + mainData.tempCommonBox193.dataKey'
            :style="mainData.tempCommonBox193.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox193.tempData'
                ref='tempCommonBox193' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox193)'>拖动</span>
        </div>
        <!-- 公有容器-94 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox194'
            :class='{selected: selectItemData.dataKey == "tempCommonBox194"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox194)'
            ref='"editTemp" + mainData.tempCommonBox194.dataKey'
            :style="mainData.tempCommonBox194.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox194.tempData'
                ref='tempCommonBox194' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox194)'>拖动</span>
        </div>
        <!-- 公有容器-95 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox195'
            :class='{selected: selectItemData.dataKey == "tempCommonBox195"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox195)'
            ref='"editTemp" + mainData.tempCommonBox195.dataKey'
            :style="mainData.tempCommonBox195.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox195.tempData'
                ref='tempCommonBox195' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox195)'>拖动</span>
        </div>
        <!-- 公有容器-96 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox196'
            :class='{selected: selectItemData.dataKey == "tempCommonBox196"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox196)'
            ref='"editTemp" + mainData.tempCommonBox196.dataKey'
            :style="mainData.tempCommonBox196.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox196.tempData'
                ref='tempCommonBox196' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox196)'>拖动</span>
        </div>
        <!-- 公有容器-97 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox197'
            :class='{selected: selectItemData.dataKey == "tempCommonBox197"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox197)'
            ref='"editTemp" + mainData.tempCommonBox197.dataKey'
            :style="mainData.tempCommonBox197.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox197.tempData'
                ref='tempCommonBox197' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox197)'>拖动</span>
        </div>
        <!-- 公有容器-98 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox198'
            :class='{selected: selectItemData.dataKey == "tempCommonBox198"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox198)'
            ref='"editTemp" + mainData.tempCommonBox198.dataKey'
            :style="mainData.tempCommonBox198.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox198.tempData'
                ref='tempCommonBox198' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox198)'>拖动</span>
        </div>
        <!-- 公有容器-99 -->
        <div 
            class="visual-sign-box"
            v-if='mainData.tempCommonBox199'
            :class='{selected: selectItemData.dataKey == "tempCommonBox199"}'  
            @click='selectTempBoxItem(mainData.tempCommonBox199)'
            ref='"editTemp" + mainData.tempCommonBox199.dataKey'
            :style="mainData.tempCommonBox199.styles">
            <TempAllElems 
                :tempData='mainData.tempCommonBox199.tempData'
                ref='tempCommonBox199' 
                @updateSignTempData='updateSignTempData'
                :templateId='templateId'
                :briefingDetailId='briefingDetailId'></TempAllElems>
            <span class="temp-move-tool" @mousedown='mousedownBox(mainData.tempCommonBox199)'>拖动</span>
        </div> 



    </div>

  

    

</div>
</template>

<script>
import tempElemsInput from '@/views/visualEditTemp/tempElemsSet/tempElemsInput.js'
import tempElemsCommon from '@/views/visualEditTemp/tempElemsSet/tempElemsCommon.js'
import tempElemsEchartList from '@/views/visualEditTemp/tempElemsSet/tempElemsEchart.js'
// 单个容器默认样式
import defaultStyle from '@/views/visualEditTemp/tempForAssist/tempDefaultStyle.js'
// 全模板
import TempAllElems from '@/views/visualEditTemp/tempElemsForGroup/TempAllElems.vue'


export default {
    name: 'CommonTemp',
    mounted () {
    	this.getData();
        document.onmousemove = (e) => {
            if(this.moveCurrentDataKey) {
                let newX = e.clientX - this.moveCurrentOffset.offsetLeft;
                let newY = e.clientY - this.moveCurrentOffset.offsetTop;

                // 方案1
                this.mainData[this.moveCurrentDataKey].styles.left = newX + 'px';
                this.mainData[this.moveCurrentDataKey].styles.leftNum = newX;
                this.mainData[this.moveCurrentDataKey].styles.top = newY + 'px';
                this.mainData[this.moveCurrentDataKey].styles.topNum = newY;
                
                // 方案2
                // let styles = JSON.parse(JSON.stringify(this.mainData[this.moveCurrentDataKey].styles));
                // styles.left = newX + 'px';
                // styles.leftNum = newX;
                // styles.top = newY + 'px';
                // styles.topNum = newY;
                // this.$set(this.mainData[this.moveCurrentDataKey], 'styles', styles);
                
                // 方案3
                // this.$set(this.mainData[this.moveCurrentDataKey].styles, 'left', newX + 'px');
                // this.$set(this.mainData[this.moveCurrentDataKey].styles, 'leftNum', newX);
                // this.$set(this.mainData[this.moveCurrentDataKey].styles, 'top', newY + 'px');
                // this.$set(this.mainData[this.moveCurrentDataKey].styles, 'topNum', newY);
            }
        };
        document.onmouseup = (e) => {
            if(this.moveCurrentDataKey) {
                console.log('up...');
                this.updateRStyleForMoveUp(this.mainData[this.moveCurrentDataKey].styles);

                this.moveCurrentDataKey = null;
                this.moveCurrentOffset.offsetLeft = 0;
                this.moveCurrentOffset.offsetTop = 0;
            }
        };
        document.onkeyup = (e) => {
            if(e.keyCode === 27) {
                this.canceSelectBox();
            }
        };
    },
    components: {
        'TempAllElems':            TempAllElems,
    },
    props: {
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容name
        briefingDetailName: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 是否编辑模式-模板
        editTempFlag: {
            type: Boolean,
            default : function () {
                return false;
            }
        },
        // 是否编辑模式-内容
        editContFlag: {
            type: Boolean,
            default : function () {
                return false;
            }
        },
        // 是否预览模式
        prevTempFlag: {
            type: Boolean,
            default : function () {
                return false;
            }
        },
    },
    data () {
        return {
            // 现在使用的最大容器编号
            nowUseMaxIdNum: '100',
            // 待添加组件群-通用
            tempElemsCommon: JSON.parse(JSON.stringify(tempElemsCommon)),
            // 待添加组件群-输入框
            tempElemsInputList: JSON.parse(JSON.stringify(tempElemsInput)),
            // 待添加组件群-图表
            tempElemsEchartList: JSON.parse(JSON.stringify(tempElemsEchartList)),
            
            // 查询链接-查询表格
            searchUrlListForTable: [{
                dicKey: 'getTemplateList',
                dicVal: '模板管理列表',
            }],
            // 单位-1个
            unitList1: [{
                dicKey: 'px',
                dicVal: 'px',
            }],
            // 单位-2个
            unitList2: [{
                dicKey: 'px',
                dicVal: 'px',
            },{
                dicKey: '%',
                dicVal: '%',
            }],
            // 单位-3个
            unitList3: [{
                dicKey: 'px',
                dicVal: 'px',
            },{
                dicKey: '%',
                dicVal: '%',
            },{
                dicKey: 'auto',
                dicVal: 'auto',
            }],
            // 单位-2个
            unitList4: [{
                dicKey: 'px',
                dicVal: 'px',
            },{
                dicKey: 'auto',
                dicVal: 'auto',
            }],
            // 相对位置-2个
            positionList: [{
                dicKey: 'relative',
                dicVal: 'relative',
            },{
                dicKey: 'absolute',
                dicVal: 'absolute',
            }],
            // 文字对齐方式-2个
            textAlignList: [{
                dicKey: 'left',
                dicVal: 'left',
            },{
                dicKey: 'center',
                dicVal: 'center',
            },{
                dicKey: 'right',
                dicVal: 'right',
            }],

            // 是|否-2个
            yesOrNoList: [{
                dicKey: '1',
                dicVal: '是',
            },{
                dicKey: '0',
                dicVal: '否',
            }],

            // 主数据
            mainData: {
    
                panelStyles: {
                    backgroundColor: 'transparent',

                    width: '1000px',
                    widthNum: '1000',
                    widthUnit: 'px',

                    height: 'auto',
                    heightNum: '0',
                    heightUnit: 'auto',
                },

            },

            // 辅助-已选中容器
            selectItemData: {},
            // 辅助-已选中容器样式
            selectedStylesData: JSON.parse(JSON.stringify(defaultStyle)),
            // 辅助-已选中容器-待修改数据
            selectedBoxFixData: {},

            // 选中面板
            panelSelectRId: 1,
            // 移动中的容器-key
            moveCurrentDataKey: null,
            moveCurrentOffset: {
                offsetLeft: 0,
                offsetTop: 0
            },

            // 辅助-是否显示编辑中容器的边框线
            isShowPanelItemBoxBorderFlag: true,
            // 辅助-是否显示面板边框线
            isShowPanelBgBorderFlag: true,

            // 是否收缩左侧工具栏
            shrinkHideLflag: false,
            // 是否收缩右侧工具栏
            shrinkHideRflag: false,
        }
    },
    methods: {

        //初始化模板数据
        async getData() {
            if((!this.templateId && !this.briefingDetailId)) {
                return;
            }
            console.log('getData:');
            this.loadedText = '数据加载中...';
            //let data = {};
            
            if(this.templateId) {
                //data.templateId = this.templateId;
                this.getModuleContent();
            }else if(this.briefingDetailId) {
                this.getModuleData();
                //data.briefingDetailId = this.briefingDetailId;
            }
            // let res = await C.request.get(C.Api('getModuleContent'), data);
            // if (res.flag === C.Flag.SUCCESS) {
            //     if(res.data) {
            //         this.mainData = JSON.parse(res.data);
            //     }
            //     this.setNowUseMaxIdNum();
            // } else {
            //     this.loadedText = '请求失败，请重试';
            // }
        },

        // 获取数据-1
        async getModuleContent() {
            let res = await C.request.get(C.Api('getModuleContent'), {
                templateId: this.templateId,
            });
            if (res.flag === C.Flag.SUCCESS) {
                if(res.data) {
                    this.mainData = JSON.parse(res.data);
                }
                this.setNowUseMaxIdNum();
            }
        },

        // 获取数据-2
        async getModuleData() {
            let res = await C.request.get(C.Api('getModuleData'), {
                briefingDetailId: this.briefingDetailId,
            });
            if (res.flag === C.Flag.SUCCESS) {
                this.mainData = JSON.parse(res.data);
                if (!C.Utils.isLocalEnv()) {
                    this.mainData = JSON.parse(res.data);
                }
            }
        },

        // 设置最大编号
        setNowUseMaxIdNum () {
            let indexKey;
            let lastIndexKey = '';

            for(indexKey in this.mainData) {
                if(indexKey.indexOf('CommonBox') !== -1) {
                    lastIndexKey = indexKey;
                }
            }

            if(lastIndexKey) {
                this.nowUseMaxIdNum = lastIndexKey.slice(-3);
            }

            console.log(this.nowUseMaxIdNum);            
        },
        
        // 发送保存
        async sendSave () {
            if((!this.templateId && !this.briefingDetailId)) {
                return;
            }
            console.log('saveData:');
            if(this.templateId) {
                this.saveModuleContent();
            }else if(this.briefingDetailId) {
                this.saveModuleData();
            }
        },

        // 保存数据-1
        async saveModuleContent() {
            let res = await C.request.post(C.Api('saveModuleContent'), {
                templateId: this.templateId,
                //moduleCode: 'M_01',
                moduleContent: JSON.stringify(this.mainData)
            });
            if (res.flag === C.Flag.SUCCESS) {
                this.$Message.success('保存成功');
            }
            this.canceSelectBox();
        },
        // 保存数据-2
        async saveModuleData() {
            let res = await C.request.post(C.Api('saveModuleData'), {
                briefingDetailId: this.briefingDetailId,
                //moduleCode: 'M_01',
                moduleContent: JSON.stringify(this.mainData)
            });
            if (res.flag === C.Flag.SUCCESS) {
                this.$Message.success('保存成功');
            }
        },

        // 从父级调用-保存
        saveTheTemp () {
            console.log('tempPage:saveTheTemp');
            this.saveSignTempForEach();
            this.sendSave();
        },
        // 从父级调用-提交
        releTheTemp () {
            console.log('tempPage:releTheTemp');
        },

        // 供子级调用--更新单个数据
        updateSignTempData (data) {
            let newData = JSON.parse(JSON.stringify(data));

            this.mainData[data.dataKey].tempData = newData;
        },
        // 调用子级保存-遍历调用子级保存-保存单个模板
        saveSignTempForEach () {
            let mainData = JSON.parse(JSON.stringify(this.mainData));
            let dataKey;
            for(dataKey in mainData) {
                if(mainData[dataKey].tempData && mainData[dataKey].tempData.isSaveInChild && this.$refs[mainData[dataKey].dataKey]) {
                    this.$refs[mainData[dataKey].dataKey].saveSignTempForChild();
                }
            }
        },

        // 临时使用--从弹窗中打开时使用浏览器存的数据
        initTempData () {
            let dataStr = localStorage.tempPageData || '';
            if(dataStr) {
                this.mainData = JSON.parse(dataStr);
            }
        },
        




        // 发送保存
        sendSaveForEditMod () {
            let data = {};
            let mainData = JSON.parse(JSON.stringify(this.mainData));
            data.templateId = this.templateId;
            data.mainData = mainData;
            console.log('mainData:')
            console.log(mainData);
            // 保存到浏览器缓存中
            localStorage.tempPageData = JSON.stringify(mainData);
            // post(urls.sendSaveTempData, data).then((res) => {
            //     if(res.flag === '0000' && res.msg) {
                    
            //     }
            // }).catch((err) => {})
        },

        // 从父级调用-保存
        saveTheTempForEditMod () {
            console.log('tempPage:saveTheTempForEditMod');
            this.sendSaveForEditMod();
        },

        // 从父级调用-导出
        exportTheTempToImg () {
            console.log('tempPage:exportTheTempToImg');
            //let data = this.$refs.refTitle.data;
            html2canvas(document.getElementById('visual-content-mod')).then(canvas=> {
                let imgUrl = canvas.toDataURL(),
                    alink;
                // 下载图片到本地
                alink = document.createElement('a');
                alink.href = imgUrl;
                alink.download = this.briefingDetailName || '模板'; // 图片名
                alink.click();
            });
        },

        // 从父级调用-发布
        sendTheTempToImg () {
            console.log('tempPage:sendTheTempToImg');
            html2canvas(document.getElementById('visual-content-mod')).then(canvas=> {
                let imgUrl = canvas.toDataURL();
                C.request.post(C.Api('briefingDeploye'), {
                    briefingDetailId: this.briefingDetailId,
                    //keyWords: this.keyWords,
                    imgFile: imgUrl
                }).then(res=> {
                    if (res.flag === C.Flag.SUCCESS) {
                        this.$Message.success('发布成功');
                        //clearInterval(this.intervalTime);
                        this.$router.push('/briefingEditor');
                    } else {
                        //this.loading = false;
                    }
                });
            });
        },

        // 选中容器
        selectTempBoxItem (itemData) {
            console.log(JSON.parse(JSON.stringify(itemData)));
            if(itemData.dataKey === this.selectItemData.dataKey) {
                return;
            }
            this.selectItemData = JSON.parse(JSON.stringify(itemData));
            this.selectedStylesData = JSON.parse(JSON.stringify(itemData.styles));

            this.setSelectedBoxFixDataForSelect();
        },
        // 更新右侧选中样式-移动时弹起用
        updateRStyleForMoveUp (styles) {
            this.selectedStylesData = JSON.parse(JSON.stringify(styles));
        },

        // 设置选中样式-容器
        setSelectedStylesForBox () {
            let dataKey = this.selectItemData.dataKey;
            if(!dataKey) {
                return;
            }
            this.mainData[dataKey].styles = this.changeStyleFromRToTForBox();
        },
        // 设置选中样式-容器-清除背景色
        setSelectedStylesClearBg () {
            this.selectedStylesData.backgroundColor = 'transparent';
            this.setSelectedStylesForBox(); 
        },
        // 操作总面板-清除背景色
        clearAllPanelBgColor () {
            this.mainData.panelStyles.backgroundColor = 'transparent';
        },
        // 样式转换--从面板到容器
        changeStyleFromRToTForBox () {
            let stylesObj = JSON.parse(JSON.stringify(this.selectedStylesData));

            stylesObj.width = stylesObj.widthNum + stylesObj.widthUnit;

            if(stylesObj.heightUnit == 'auto') {
                stylesObj.height = 'auto';
            }else {
                stylesObj.height = stylesObj.heightNum + stylesObj.heightUnit;
            }

            stylesObj.left = stylesObj.leftNum + stylesObj.leftUnit;
            stylesObj.top = stylesObj.topNum + stylesObj.topUnit;

            stylesObj.fontSize = stylesObj.fontSizeNum + stylesObj.fontSizeUnit;
            stylesObj.lineHeight = stylesObj.lineHeightNum + stylesObj.lineHeightUnit;
            // 外边距
            stylesObj.marginLeft = stylesObj.marginLeftNum + stylesObj.marginLeftUnit;
            stylesObj.marginRight = stylesObj.marginRightNum + stylesObj.marginRightUnit;
            stylesObj.marginTop = stylesObj.marginTopNum + stylesObj.marginTopUnit;
            stylesObj.marginBottom = stylesObj.marginBottomNum + stylesObj.marginBottomUnit;
            //内边距
            stylesObj.paddingLeft = stylesObj.paddingLeftNum + stylesObj.paddingLeftUnit;
            stylesObj.paddingRight = stylesObj.paddingRightNum + stylesObj.paddingRightUnit;
            stylesObj.paddingTop = stylesObj.paddingTopNum + stylesObj.paddingTopUnit;
            stylesObj.paddingBottom = stylesObj.paddingBottomNum + stylesObj.paddingBottomUnit;
            //其它
            stylesObj.transform = 'translate(' + stylesObj.transformXNum + stylesObj.transformXUnit + ', ' + stylesObj.transformYNum + stylesObj.transformYUnit + ')';
            if(stylesObj.clearUnit == '1') {
                stylesObj.clear = 'both';
            }else {
                stylesObj.clear = 'none';
            }

            return stylesObj;
        },

        // 比例两个数组的不同并返回不同的元素
        getArrDifference (arr1, arr2) {
            return arr1.concat(arr2).filter((v, i, arr) => {
                return arr.indexOf(v) === arr.lastIndexOf(v);
            });
        },
        // 初始化单个容器
        initSignItemBox (dataKey, tempData) {
            if(!this.mainData[dataKey]) {//tempCommonBox101
                this.$set(this.mainData, dataKey, {
                    "dataKey": dataKey,
                    "styles": this.getDefaultStyle(tempData),//JSON.parse(JSON.stringify(defaultStyle)),
                    "tempData": {}
                })
            }
        },
        // 获取最开始默认容器的消息
        getDefaultStyle (tempData) {
            let defaultStyleN = JSON.parse(JSON.stringify(defaultStyle));
            let tempType = tempData.tempType;
            if(tempType == 'SignTextarea' || tempType == 'QueryTable') {
                defaultStyleN.height = 'auto';
                defaultStyleN.heightNum = '0';
                defaultStyleN.heightUnit = 'auto';
            }else if(tempType == 'EchartItem1' || tempType == 'EchartItem2' || tempType == 'EchartItem3') {
                defaultStyleN.height = '300px';
                defaultStyleN.heightNum = '300';
                defaultStyleN.heightUnit = 'px';
            }

            return defaultStyleN;
        },
        // 设置选中样式-面板
        setSelectedStylesForPanel () {
            this.mainData.panelStyles = this.changeStyleFromRToTForPanel();
        },
        // 样式转换--从面板到容器
        changeStyleFromRToTForPanel () {
            let stylesObj = JSON.parse(JSON.stringify(this.mainData.panelStyles));

            if(stylesObj.heightUnit == 'auto') {
                stylesObj.height = 'auto';
            }else {
                stylesObj.height = stylesObj.heightNum + stylesObj.heightUnit;
            }
            if(stylesObj.widthNum && stylesObj.widthUnit) {
                stylesObj.width = stylesObj.widthNum + stylesObj.widthUnit;
            }
            

            return stylesObj;
        },

        // 往容器添加组件
        addElemToBox (item) {
            let dataKey = this.selectItemData.dataKey;
            let tempData;
            
            if(!dataKey) {//没有选中容器,走新增
                let newNowUseMaxIdNum = ('00' + (parseInt(this.nowUseMaxIdNum) + 1)).slice(-3)
                dataKey = 'tempCommonBox' + newNowUseMaxIdNum;

                console.log('newNowUseMaxIdNum:' + newNowUseMaxIdNum);
                // 新建容器
                this.initSignItemBox(dataKey, item.tempData);
                // 选中容器
                //this.selectTempBoxItem(this.mainData[dataKey]);
                // 重置当前使用的最大容器编号
                this.setNowUseMaxIdNum();
            }

            if(this.mainData[dataKey].tempData.tempType) {//该容器中已有数据
                let inputFlag = confirm('该容器中已有数据，是否替换掉？')
                if(!inputFlag) {
                    return;
                }
            }

            console.log(this.mainData[dataKey]);

            tempData = JSON.parse(JSON.stringify(item.tempData));
            tempData.dataKey = dataKey;

            if(tempData.tempType == 'CommonTable' || tempData.tempType == 'QueryTable') {//通用表格,查询表格
                let showLineCount = prompt("请输入你要使用的列数", "10"); 
                tempData.showLineCount = parseInt(showLineCount) || 10;
            }

            this.mainData[dataKey].tempData = tempData;
        },

        // 切换选中面板
        skipToolPanel(num) {
            this.panelSelectRId = num;
        },

        // 按下容器
        mousedownBox (item) {
            let dataKey = item.dataKey;

            this.moveCurrentDataKey = dataKey;
            this.moveCurrentOffset.offsetLeft = event.clientX - parseFloat(this.mainData[dataKey].styles.leftNum);
            this.moveCurrentOffset.offsetTop = event.clientY - parseFloat(this.mainData[dataKey].styles.topNum);
        },

        // 重置容器
        resetSelectBox () {
            let dataKey = this.selectItemData.dataKey;

            this.$Modal.confirm({
                title: '重要提示',
                content: '您确定要清空容器吗？',
                onOk: () => {
                    this.mainData[dataKey] = {
                        "dataKey": dataKey,
                        "styles": JSON.parse(JSON.stringify(defaultStyle)),
                        "tempData": {}
                    };
                },
                onCancel: () => {
                    //this.$Message.info('点击了取消');
                }
            });
        },
        

        // 取消选择
        canceSelectBox () {
            this.selectItemData = {};
            this.selectedStylesData = {};
        },
        // 删除容器
        delSelectBox () {
            let dataKey = this.selectItemData.dataKey;
            
            if(dataKey) {
                let dataKeyNum = dataKey.slice(-2);    
                if(dataKeyNum !== this.nowUseMaxIdNum) {
                    this.delSelectCenBoxDoing(dataKey);
                    //this.$Message.error('只能从最后一个容器起开始删除');
                }else {
                    this.$Modal.confirm({
                        title: '重要提示',
                        content: '您确定要删除该容器吗？',
                        onOk: () => {
                            this.delSelectBoxDoing(dataKey);
                        },
                        onCancel: () => {
                            //this.$Message.info('点击了取消');
                        }
                    });
                }
            }
        },
        //删除容器-执行-直接删除最后一个
        delSelectBoxDoing (dataKey) {
            this.canceSelectBox();
            delete this.mainData[dataKey];
            this.setNowUseMaxIdNum();
        },
        //删除容器-执行-删除中间的
        delSelectCenBoxDoing (dataKey) {
            let dataKeyNum = parseInt(dataKey.slice(-3));
            let objKey;
            let mainData = JSON.parse(JSON.stringify(this.mainData));
            let newMainData = {};
            this.canceSelectBox();
            delete mainData[dataKey];
            
            for(objKey in mainData) {
                if(objKey.indexOf("tempCommonBox") > -1) {
                    let keyNum = parseInt(objKey.slice(-3));
                    if(dataKeyNum < keyNum) {//删除的下标在遍历的下标之下
                        let newKey = "tempCommonBox" + ('00' + (keyNum - 1)).slice(-3); 
                        newMainData[newKey] = this.moveSignBoxForTrans(mainData[objKey], newKey);
                    }else if(dataKeyNum > keyNum) {//删除的下标在遍历的下标之上
                        newMainData[objKey] = JSON.parse(JSON.stringify(mainData[objKey]));
                    }
                }else {
                    newMainData[objKey] = JSON.parse(JSON.stringify(mainData[objKey]));
                }
            }

            this.mainData = newMainData;
            this.setNowUseMaxIdNum();
        },

        // 位移单个容器
        moveSignBoxForTrans (itemData, newKey) {
            let itemDataN = JSON.parse(JSON.stringify(itemData));
            itemDataN.dataKey = newKey;
            itemDataN.tempData.dataKey = newKey;
            return itemDataN;
        },

        // 数据-选中容器时重置待选中的数据
        setSelectedBoxFixDataForSelect () {
            let itemData = JSON.parse(JSON.stringify(this.selectItemData));
            let tempData = itemData.tempData || {};
            let tempType = tempData.tempType || '';

            this.selectedBoxFixData = {};
            if(tempType == 'SignInput') {//文本框
                this.selectedBoxFixData.placeholder = tempData.placeholder;
                this.selectedBoxFixData.maxlength = tempData.maxlength;
            }else if(tempType == 'SignTextarea') {//文本哉
                this.selectedBoxFixData.placeholder = tempData.placeholder;
                this.selectedBoxFixData.maxlength = tempData.maxlength;
            }else if(tempType == 'SignSquare' || tempType == 'SignCircular' || tempType == 'SignStraightLine' || tempType == 'SignDottedLine') {//边框
                this.selectedBoxFixData.borderWidth = tempData.borderWidth;
                this.selectedBoxFixData.borderColor = tempData.borderColor;
            }else if(tempType == 'QueryTable') {//查询表格
                this.selectedBoxFixData.queryUrl = tempData.queryUrl;
                this.selectedBoxFixData.fieldNames = tempData.fieldNames;
            }else if(tempType == 'EchartItem2') {//图表-柱状图
                this.selectedBoxFixData.colors = tempData.colors && tempData.colors[0];
            }
            console.log(this.selectedBoxFixData);
        },
        // 数据-点击确定
        clickEditBoxFixData () {
            let itemData = JSON.parse(JSON.stringify(this.selectItemData));
            let tempData = itemData.tempData || {};
            let tempType = tempData.tempType || '';
            let dataKey = itemData.dataKey;

            if(!dataKey) {
                return;
            }

            //this.selectedBoxType();
            if(tempType == 'SignInput') {
                this.mainData[dataKey].tempData.placeholder = this.selectedBoxFixData.placeholder;
                this.mainData[dataKey].tempData.maxlength = this.selectedBoxFixData.maxlength;
            }else if(tempType == 'SignTextarea') {
                this.mainData[dataKey].tempData.placeholder = this.selectedBoxFixData.placeholder;
                this.mainData[dataKey].tempData.maxlength = this.selectedBoxFixData.maxlength;
            }else if(tempType == 'SignSquare' || tempType == 'SignCircular' || tempType == 'SignStraightLine' || tempType == 'SignDottedLine') {//边框
                this.mainData[dataKey].tempData.borderWidth = this.selectedBoxFixData.borderWidth;
                this.mainData[dataKey].tempData.borderColor = this.selectedBoxFixData.borderColor;
            }else if(tempType == 'QueryTable') {
                this.mainData[dataKey].tempData.queryUrl = this.selectedBoxFixData.queryUrl;
                this.mainData[dataKey].tempData.fieldNames = this.selectedBoxFixData.fieldNames;
                this.mainData[dataKey].tempData.hadSearchDataFlag = false;
                this.saveSignTempForChild(dataKey);
            }else if(tempType == 'EchartItem2') {//图表-柱状图
                if(this.selectedBoxFixData.colors) {
                    this.mainData[dataKey].tempData.colors = [this.selectedBoxFixData.colors];    
                }
                this.saveSignTempForChild(dataKey);
            }
        },

        // 根据 dataKey 调用相应的子级的 saveSignTempForChild
        saveSignTempForChild(dataKey) {
            this.$refs[dataKey].saveSignTempForChild();
        },

        // 收缩/展开左侧工具栏
        toggleShrinkOpenL() {
            this.shrinkHideLflag = !this.shrinkHideLflag;
        },
        // 收缩/展开左侧工具栏
        toggleShrinkOpenR() {
            this.shrinkHideRflag = !this.shrinkHideRflag;
        },

    },
    watch: {
        templateId () {
            this.getData();
        },
        briefingDetailId () {
            this.getData();
        },
    },
    computed:{
        // 被选中容器的 tempType
        selectedBoxType(){
            return (this.selectItemData.tempData && this.selectItemData.tempData.tempType) || '';
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wait-assist-item{ line-height: 24px; padding: 0 12px; }
</style>
